<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>午间小憩</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <style>
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 200%;
      color: #333;
      margin-top: 30px;
    }
    .header p {
      font-size: 14px;
    }
  </style>
  <script type="text/javascript" src="assets/js/jquery.min.js"></script>
  <script type="text/javascript">
  
  function loadPicimageCode() {
	 
	document.getElementById("picimageCode").src = '${base}/admin/image_code?ran=' + Math.random();
	  
	}

  function login() {
	  
	 	var username = $('[name="username"]').val();
	    
		if(username==''){
			alert('用户名不能为空！');
			return;
		}
     	var pwd = $('[name="password"]').val();
		if(pwd==''){
			alert('密码不能为空！');
			return;
		}
		
		
		var imageCode = $('[name="imageCode"]').val();
		if(imageCode==''){
			alert('验证码不能为空！');
			return;
		}
		if(imageCode.length != 4){
			alert('验证码输入错误！');
			return;
		} 
		
		form1.action = "${base}/admin/loginVerify";
		form1.submit();
		
	}
  </script>
</head>
<body>
<div class="header">
  <div class="am-g">
    <h1>博  文 </h1>
    <p>此界面来自Amazeui<br/>午间小憩，午间感悟，午间升华</p>
  </div>
  <hr />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
         
    <h1 >登录</h1>
     <hr>
    <div class="am-btn-group">
      <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
      <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i> Google+</a>
      <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i> stackOverflow</a>
    </div>
    <br>
    <br>  
    <form  name = "form1" method="post" class="am-form">
      <label for="email">邮箱:</label>
      <input type="text" name="username" id="email" value="">
      <br>
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" value="">
      <br>
     <label for="imageCode" class="col-sm-2 control-label">验证码：</label>
	
	<div class="am-g">
    <div class="am-u-sm-10"><input name="imageCode" type="text"  class="form-control" id="imageCode" 
							tabindex="1" placeholder="验证码"></div>
  
    <div class="am-u-sm-2"> <img id="picimageCode" align="middle" width="60" height="50"  
	  style="line-height: 5px;cursor:pointer;"
		 src="${base}/admin/image_code" title="更换一张验证码图片" onclick="loadPicimageCode()"/></div>
   </div>

      <br>
     
      <label for="remember-me">
        <input id="remember-me" type="checkbox" name="remember">
        记住密码
      </label>
      <br />
      <div class="am-cf">
        <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl"  onclick="login();">
        <a href="regist.html" class="am-btn am-btn-primary am-btn-sm am-fr">注册</a>
      </div>
    </form>
    <hr>
    <p>© 2015 SZBY,studybyself.</p>
  </div>
</div>
</body>
</html>